<template>
	<!-- <view class="content">
		<view class="main">
			<view class="head">
				用户注册
			</view>
			<view class="center">
				<form @submit="formSubmit" @reset="formReset">
					<view class="tips" v-show="accshow">
						4到9位(字母，数字，下划线，减号)!
					</view>
					<view class="uni-form-item uni-column inp">
						<view class="title">用户名:</view>
						<input class="uni-input inpu" name="username" placeholder="Username" />
					</view>
					<view class="uni-form-item uni-column inp">
						<view class="title" style="margin-right: 25upx;">密 码 :</view>
						<input class="uni-input inpu" type="password" name="password" placeholder="Password" />
					</view>
					<view class="tips" v-show="show">
						密码至少八个字符，至少包含一个字母,数字,字符!
					</view>
					<view class="uni-btn-v btns">
						<button class="btn" form-type="submit">注册</button>
						<button class="btn" type="default" form-type="reset">重置</button>
					</view>
				</form>
			</view>
		</view>
	</view> -->
	<view class="content">
		<image class="head_img" src="../../static/logo.png" mode="widthFix"></image>
		<view class="center">
			<form @submit="formSubmit">
				<view class="tips" v-show="accshow">
					用户名为4-16个字符(可包含中文,数字,字母和下划线)!
				</view>
				<view class="uni-form-item uni-column inp" :class="isFocus?'hoverr':''">
					<input class="uni-input inpu" focus name="username" placeholder="Username"
						@focus="isFocus=true;isFocus2=false;isFocus3=false" />
				</view>
				<view class="tips tip2" v-show="show">
					密码至少八个字符，至少包含一个字母,数字,字符!
				</view>
				<view class="uni-form-item uni-column inp" :class="isFocus2?'hoverr':''">
					<input class="uni-input inpu" type="password" name="password" placeholder="Password"
						@focus="isFocus2=true;isFocus=false;isFocus3=false" />
				</view>
				<view class="tips tip3" v-show="passshow">
					输入两次密码不一致!
				</view>
				<view class="uni-form-item uni-column inp" :class="isFocus3?'hoverr':''">
					<input class="uni-input inpu" type="password" name="password2" placeholder="Resure Password"
						@focus="isFocus3=true;isFocus=false;isFocus2=false" />
				</view>
				<view class="uni-btn-v btns">
					<button class="btn" form-type="submit">创建账号</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				userinfo: {},
				isFocus: false,
				isFocus2: false,
				isFocus3: false,
				show: false,
				accshow: false,
				passshow: false
			}
		},
		onShow() {},
		methods: {
			accountZhengZe(account) {
				const regex = /^[\u4e00-\u9fa5\w]{4,16}$/
				// console.log(account, regex.test(account))
				if (!regex.test(account)) {
					this.accshow = true
					return 0;
				} else {
					this.accshow = false
					return 1;
				}
			},
			passZhengZe(password) {
				const regex =
					/^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/
				// console.log(password, regex.test(password))
				if (!regex.test(password)) {
					this.show = true
					return 0;
				} else {
					this.show = false
					return 1;
				}
			},
			async formSubmit(e) {
				// // console.log(e)
				let username = e.detail.value.username
				let password = e.detail.value.password
				let password2 = e.detail.value.password2
				
				if (!this.accountZhengZe(username))
					return 0;
				if (!this.passZhengZe(password))
					return 0;
				if (password !== password2) {
					this.passshow=true;
					return 0;
				}
				if (username && password) {
					let BaseUrl = getApp().globalData.BaseUrl
					await uni.request({
						url: BaseUrl + '/user/register',
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						data: {
							username: username,
							password: password
						},
						success: (res) => {
							if (res.data.code == 1003) {
								uni.showToast({
									title: "用户名已存在",
									icon: "error"
								})
								return;
							}
							uni.showToast({
								title: "注册成功"
							})
							uni.request({
								url: BaseUrl + '/login',
								method: 'POST',
								header: {
									'Content-Type': 'application/json'
								},
								data: {
									username: username,
									password: password
								},
								success: (res) => {
									console.log(res)
									uni.setStorageSync('cookies', res.cookies[0])
									uni.setStorageSync('token', res.data.data.refreshToke)
									uni.setStorageSync('refreshtoken', res.data.data
										.refreshToke)
									uni.setStorageSync('expireTime', res.data.data
										.expireTime)
									uni.request({
										url: BaseUrl + '/user/userDetail',
										method: 'GET',
										header: {
											'Content-Type': 'application/json',
											'token': res.data.data.refreshToke
										},
										success: (res) => {
											let data = res.data.data
											this.userinfo = data
											this.userinfo.password = ''
											uni.setStorageSync('userinfo',
												this.userinfo)
											setTimeout(() => {
												uni.reLaunch({
													url: '../index/index',
												})
											}, 1000)
										}
									})
								}
							})
						},
						fail: (res) => {
							// console.log(res)
						}
					})

				}
			},
			formReset: function(e) {
				// console.log('清空数据')
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		background-color: #fff;
		position: relative;

		.head_img {
			position: relative;
			left: 50%;
			transform: translate(-50%);
		}

		.center {

			margin-top: 100upx;
			position: relative;

			.tips {
				position: absolute;
				height: 30upx;
				font-size: 20upx;
				color: white;
				border-radius: 30upx;
				background-color: #ffaa00;
				left: 10%;
				padding: 2upx 22upx;
			}

			.tips:nth-child(1) {
				top: -20upx;
				width: 60%;
			}
			.tip2 {
				top: 80upx;
				width: 65%;
			}
			.tip3 {
				top: 188upx;
				width: 31%;
			}

			.inp {
				display: flex;
				margin-bottom: 40upx;
				margin-left: 60upx;
				margin-right: 50upx;
				border-bottom: solid #888 1upx;
				height: 70upx;
				line-height: 70upx;



				.inpu {
					margin-left: 10upx;
					height: 70upx;
					width: 100%;
				}
			}

			.hoverr {
				border-bottom: solid #888 5upx;
			}

			.btns {
				margin-top: 80upx;

				.btn {
					color: #fff;
					width: 70%;
					height: 70upx;
					line-height: 70upx;
					background-color: #18aeff;
				}
			}
		}
	}
</style>
